<template>
  <div class="bg">
    <a-card title="登录" class="card">
      <a-form :model="formState" name="normal_login" class="login-form">
        <a-form-item
          label="用户名"
          name="username"
          :rules="[{ required: true, message: '用户名不能为空!' }]"
        >
          <a-input v-model:value="formState.username">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          label="密　码"
          name="password"
          :rules="[{ required: true, message: '密码不能为空!' }]"
        >
          <a-input-password v-model:value="formState.password">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <div class="login-form-wrap">
          <a href=""><RouterLink to="/register">注册</RouterLink></a>
        </div>

        <a-form-item>
          <a-button
            :disabled="disabled"
            type="primary"
            html-type="submit"
            class="login-form-button"
            @click="onFinish"
          >
            确定
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import { defineComponent, reactive, computed } from 'vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import $api from '@/request/api'
import { useStore } from 'vuex'
export default defineComponent({
  components: {
    UserOutlined,
    LockOutlined,
  },

  setup() {
    const formState = reactive({
      username: '',
      password: '',
    })
    const router = useRouter()
    const $store = useStore()
    const onFinish = () => {
      $api.postLogin(formState).then((res) => {
        const { code, messages, token, options, data } = res
        //判断用户是否正确
        if (code == 201) {
          //将组件中的数据传vuex中
          localStorage.setItem('options', JSON.stringify(options))
          localStorage.setItem('userinformation', JSON.stringify(data))
          localStorage.setItem('id', data.user_id)
          //将token放入localStorage,放在客服端中
          localStorage.setItem('token', token)
          $store.commit('changeOption', options)
          $store.commit('changeuser', data)
          //登录成功跳转到后台的首页
          router.push({
            path: '/',
          })
          message.success(messages)
        } else {
          //返回错误信息
          message.error(messages)
        }
      })
    }
    const disabled = computed(() => {
      return !(formState.username && formState.password)
    })
    return {
      formState,
      onFinish,
      disabled,
    }
  },
})
</script>
<style scoped>
.bg {
  background-image: url('../../city-perekrestok-dorogi-vid_sverkhu-dvizhenie-mosti-shankhai-kitai-84552.jpeg');
  background-size: 100%;
  height: 100vh;
  position: relative;
  z-index: 1;
}
.bg:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.5);
  z-index: -1;
}
.card {
  width: 400px;
  border-radius: 12px;
  position: absolute;
  left: 37%;
  top: 20%;
}
.login-form {
  max-width: 300px;
}
.login-form-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.login-form-forgot {
  margin-bottom: 24px;
}
.login-form-button {
  width: 100%;
}
</style>
